// 权限控制
import router from './router'
import store from './store'
import NProgress from 'nprogress'
import 'nprogress/nprogress.css' // 引入进度条样式
import { asyncRoutes } from '@/router'
const whiteList = ['/login', '/404'] // 定义白名单  所有不受权限控制的页面
// 路由全局前置导航守卫

router.beforeEach(async(to, from, next) => {
  // 开启滚动条
  NProgress.start()
  const token = store.getters.token
  if (token) {
    if (to.path === '/login') {
      next('/')
    } else {
      // 用户信息获取后存入vuex中， 如果vuex有数据则不需要发送请求
      if (!store.state.user.userInfo.userId) {
        const res = await store.dispatch('user/asyncGetUserInfo')

        // 拿到菜单权限数据
        const menus = res.roles.menus
        // 以菜单权限数据为主对动态路由表做过滤处理 筛选出符合条件的项
        // 1. filter  2.动态路由表中如果某一项它的children属性中的第一项的name能在menus中找到
        const filterRoutes = asyncRoutes.filter(item => {
          return menus.includes(item.children[0].name)
        })
        console.log('当前传出来的接口数据为', menus)
        console.log('过滤之后的动态路由表', filterRoutes)
        // 调用mutation函数 把动态路由表添加到menuList
        store.commit('menu/setMenuList', filterRoutes)
        // 因为动态路由表需要做权限控制 我们在初始化的时候只初始化静态的 而这个动态的我们在做完过滤之后
        // 再添加进去
        router.addRoutes([...filterRoutes, { path: '*', redirect: '/404', hidden: true }])

        // 修复刷新白屏bug
        // 在路由动态添加之后 模拟了一下重新进入路由
        // 因为动态路由表的生成是需要通过调用接口经过筛选才有的
        // 刷新的时候 立刻就想进入路由 但是没有生成
        // 所以在addRoutes之后也就是正式生成之后  把之前本来想去往的路由再重新进入一遍
        next({
          ...to, // next({ ...to })的目的,是保证路由添加完了再进入页面 (可以理解为重进一次)
          replace: true // 覆盖上一次的记录
        })
        return
      }

      next()
    }
  } else {
    // 如果没有token
    if (whiteList.includes(to.path)) {
      // 如果找到了 表示在在名单里面
      next()
    } else {
      next('/login')// 跳到登录页
    }
  }
  // 关闭进度条
  NProgress.done()
})
